<template>
  <div class="home">
    <Headers title="接个招">
    </Headers>
    <!-- <p style="color: #d5d505">~恭喜~</p> -->
    <h4 style="color: #FF976A; font-weight: bold">恭喜您已成功参与传播达人推广活动</h4>
    <!-- <p style="color: #ccc; font-size: 10px">可在个人中心作品中查看</p> -->
    <p style="color: #fff; font-size: 16px">你参与的作品是</p>
    <div class="player-container">
      <div class="video">
        <video width="100%" autoplay   src="@/assets/mda.mp4"></video>
      </div>
      <div class="message">
        <p class="name">幸福晚餐新品尝鲜酸辣鸡买一送一</p>
        <p class="time">有效期 2021-6-1 至 2021-6-30</p>
        <van-button v-if="true" round class="btn" color="linear-gradient(to right, #FF9966, #FF8686)">领取优惠券
        </van-button>
        <van-button v-if="false" round class="btn" color="#CCCCCC">已领取
        </van-button>
      </div>
    </div>
    <!-- 我的券和一键领取 -->
    <div class="tools">
      <van-button round class="btn" type="default">我的卡券
        </van-button>
      <van-button round class="btn" color="linear-gradient(to right, #FF9966, #FF8686)">一键领取
        </van-button>
    </div>
    <!-- <div class="article" v-html="content"></div> -->
  </div>
</template>

<script>
// Toast,
import { Button  } from "vant";
import { video, checkCard } from "../api/index";
import  Headers  from "../components/header";

export default {
  name: "Home",
  src: "",
  components: {
    vanButton: Button,Headers
  },
  data() {
    "";
    return {
      message: "加载中",
      activity_id: "",
      myvideo: "",
      title: "",
      content: "",
      userid: "",
      get_card_id:'',
      card_group:'',
    };
  },
  methods: {
    toCardlist() {
      let params = {
        activity_id: this.activity_id,
        user_id: this.userid,
        // activity_id: 1,
        // activity_id: 51,
        // user_id:659
      };
      checkCard(params).then((res) => {
          // let num = res.data.code;
          localStorage.setItem("code", res.data.code);
          this.get_card_id = res.data.data.get_card_id;
          // localStorage.setItem("get_card_id", res.data.data.get_card_id);
          
          console.log(res)
          // this.$router.push({ name: "cardList",params:{activity_id:this.activity_id,user_id:this.userid}});
          this.$router.push({ name: "cardList",params:{activity_id:this.activity_id,user_id:this.userid}});
       
        }).catch((err) => {
          console.log(err);
        });
    },
    toGet() {
      // this.$router.push({ name: "cardList" ,params:{activity_id:this.activity_id,type:'checkCard',user_id:this.userid}});
    },
    
  },
  created() {
    // 一进去就获取额数据
    function getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
          return pair[1];
        }
      }
      return false;
    }
    let num = getQueryVariable("id");
    let tmpNumber = getQueryVariable("tmpNumber");
    let user_id = getQueryVariable("user_id");
    this.userid = user_id; // 用户名
    console.log(user_id,'+',tmpNumber,'+',num);
    localStorage.setItem("user_id", user_id);
    this.activity_id = num; //  活动id
    localStorage.setItem("activity_id", num);
    let params = {
      id: num,
      tmpNumber: tmpNumber, 
    };
    console.log(params);
    video(params)
      .then((res) => {
        this.myvideo = res.data.data.video;
        this.title = res.data.data.title;
        this.content = res.data.data.desc;
        console.log(res.data);
        this.card_group = res.data.data.card_group
      })
      .catch((error) => {
        console.log(error);
      });
  },
};
</script>

<style lang="less" scoped>
/deep/ i.van-icon.van-icon-arrow-left {
  font-size: 18px;
}
.player-container {
  background-color: #fff;
  margin: 96px  16px;
  margin-top: 16.33px;
  height: 336px;
  display: flex;
  flex-direction: column;
  border-radius: 16px 16px 16px 16px;
  overflow: hidden;
  .video{
    width: 343px;
    height: 193px;
  }
  .message { 
    padding: 0 16px;
    text-align: left;
    .name {
      font-size: 16px;
      font-weight: bold;
      color: #333333;
      line-height: 22px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .time{
      font-size: 12px;
      font-weight: 500;
      color: #676767;
    }
    .btn {
      width: 311px;
    }
  }
}

.article {
  min-height: 12.5rem;
  height: auto;
  overflow: auto;
  color: #fff;
  background: #121823;
  margin: 0 0.75rem;
  border-radius: 8px;
  padding: 1.125rem;
}
.text {
  position: absolute;
  left: 48%;
  transform: translateX(-50%);
}
.btn {
  font-size: 15px;
}
/deep/ .van-button--small {
  height: 2.25rem;
  width: 100%;
  margin: 0 0.75rem;
  font-size: 14px;
}
.color {
  background: #15151f;
}
.selectColor {
  background: #fe2b53;
}
.tools{
  display: flex;
  justify-content: space-around;
  font-weight: bold;
  color: #12151A;
  .btn{
    width: 164px;
    height: 48px;
    
  }
}
</style>
